<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航特效</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }

        #nav .navsBox {
            width: 160px;
        }

        #nav .navsBox .firstNav {
            height: 45px;
            line-height: 45px;
            background-color: #EBEBEB;
            border-left: 10px solid #FE705C;
            padding-left: 20px;
            width: 130px;
            font-weight: bold;
            cursor: pointer;
        }

        #nav .navsBox ul {
            display: none;
            list-style: none;
        }

        #nav .navsBox ul li {
            display: block;
            height: 45px;
            line-height: 45px;
            padding-left: 70px;
            width: 90px;
            background: #F2F2F2 33px 7px no-repeat;
        }

        #nav .navsBox ul li.jedh {
            background-image: url("./images/huan.gif");
        }

        #nav .navsBox ul li.jlbbyk {
            background-image: url("./images/you.gif");
        }

        #nav .navsBox ul li.jwljb {
            background-image: url("./images/gouwu.gif");
        }

        #nav .navsBox ul li.mrljb {
            background-image: url("./images/meiri.gif");
        }

        #nav .navsBox ul li.vipjtj {
            background-image: url("./images/zhe.gif");
        }

        #nav .navsBox ul li.onbg {
            background-color: #F9DBD1;
        }

        #nav .navsBox ul li a {
            color: #000;
            text-decoration: none;
        }


    </style>
</head>
<body>
<div id="nav">
    <div class="navsBox">
        <div class="firstNav">购物特权</div>
        <ul id="list">
            <li class="jedh"><a href="#">全额兑换</a></li>
            <li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>
            <li class="jwljb"><a href="#">购物领金币</a></li>
            <li class="mrljb"><a href="#">每日领金币</a></li>
            <li class="vipjtj"><a href="#">VIP阶梯价</a></li>
        </ul>
    </div>
</div>



<script>
    $(".firstNav").click(function () {
        $('#list').slideToggle(500);//500毫秒循环展示
    });
    $('#list li').hover(function (){
        $(this).addClass('onbg');
    },function (){
        $(this).removeClass('onbg');
        }
    );

</script>

</body>
</html>